<template>
  <div>
     <van-cell  title="全部评论"/>
     <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
       <comment-item
       v-for="(item,index) in list"
       :key="index"
       :comment="item"
       @reply-click="$emit('reply-click',$event)"
       ></comment-item>
    </van-list>
  </div>
</template>
<script>
import commentItem from './comment-item.vue'
import {getComment} from '@/api/comment'
export default {
  props:{
    source:{
      type:[Number,String,Object],
      required:true
    },
    //获取文章评论 字符a
    //获取回复评论 字符c
    type:{
      type:String,
      default:'a'
    },
    list:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
  components:{
    commentItem
  },
  data(){
    return {
      // list: [],
      loading: false,
      finished: false,
      offset:null,
      limit:10,
    }
  },
  methods:{
   async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求

        const {data}= await getComment({
             type:this.type,
             source:this.source.toString(),
             offset:this.offset,
             limit:this.limit
        })
        this.$emit('update-total-count',data.data.total_count)
        //console.log(data.data.total_count)
        //把数据放到列表中
        const {results}=data.data
        this.list.push(...results)
        //将本次的loading关闭
        this.loading = false;
        //判断是否还有数据
        if(results.length){
          //如果有，更新获取下一页数据的页码
          this.offset=data.data.last_id
        }else{
          // 数据全部加载完成
          this.finished = true;
        }
    }
  }
}
</script>
<style lang="less" scoped>

</style>

